<!--
 * @Author: wangming
 * @Date: 2021-03-26 11:03:43
 * @LastEditors: wangming
 * @LastEditTime: 2022-07-21 17:06:46
 * @Description: file content
-->
<template>
  <el-container v-if="getQueryVariable === 'ONLY_CONTENT'">
    <el-main class="container">
      <slot />
    </el-main>
  </el-container>
  <el-container v-else-if="getQueryVariable === 'PRINT'">
    <el-header class="header ks-row-middle print-header" height="60px">
      <el-button @click="handlePrint" type="primary">打印</el-button>
    </el-header>
    <el-main class="container">
      <slot />
    </el-main>
  </el-container>
  <el-container v-else>
    <el-aside class="hamenu" :width="active ? '64px' : '210px'">
      <div class="ks-row-middle-center h60" v-if="active">
        <el-image
          v-if="APP_INFO.icon"
          style="height: 40px; width: 40px"
          :src="APP_INFO.icon.accessUrl || APP_INFO.icon"
        ></el-image>
        <svg
          class="p5"
          v-else
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 300 196.74"
        >
          <defs>
            <symbol id="logo" data-name="logo" viewBox="0 0 133.07 87.27">
              <path
                d="M89.43,0H43.63L0,43.63,43.63,87.27h45.8l43.64-43.64Zm31.72,43.2H97.44L67.16,12.92,79,1.06ZM66.53,13.54,96.64,43.63,66.53,73.73l-30.1-30.1ZM55.12.87H78L66.54,12.29h0L55.11.87,66.53,12.3h0Zm-1.07.19L65.91,12.92,35.64,43.2H11.91Zm-42.14,43H35.63L65.91,74.35,54.05,86.21ZM55.12,86.4,66.54,75,78,86.4ZM79,86.21,67.16,74.36,97.44,44.07h23.71Z"
              />
              <polygon
                points="70.74 22.21 62.26 30.67 62.1 64.57 70.59 56.12 70.74 22.21"
              />
            </symbol>
          </defs>
          <g id="Layer_2" data-name="Layer 2">
            <g id="Logos">
              <use
                fill="#fff"
                width="133.07"
                height="87.27"
                transform="scale(2.25)"
                xlink:href="#logo"
              />
            </g>
          </g>
        </svg>
      </div>
      <div class="ks-row-middle-center h60" v-else>
        <el-image
          v-if="APP_INFO.iconPro"
          style="height: 60px; width: 210px"
          :src="APP_INFO.iconPro.accessUrl || APP_INFO.iconPro"
          fit="cover"
        ></el-image>
        <h2 :title="APP_INFO.appName" class="wh ml12 ell" v-else>
          {{ APP_INFO.appName }}
        </h2>
      </div>
      <haNavMenu :isCollapse="active"></haNavMenu>
    </el-aside>
    <el-container>
      <el-header class="header ks-row-middle" height="60px">
        <haHamburger v-model="active" class="poi" />
        <div class="ks-col"></div>
        <haAvatar></haAvatar>
      </el-header>
      <tags-view />
      <el-main class="container">
        <div :class="isApp ? 'containerbox' : 'pht100'">
          <slot />
        </div>
        <haFooter v-if="isApp"></haFooter>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapGetters } from "vuex";
import {
  haAvatar,
  haHamburger,
  haNavMenu,
  haFooter,
  TagsView,
} from "./index.js";
export default {
  name: "Default",
  methods: {
    handlePrint() {
      this.$nextTick(() => {
        window.print();
      });
    },
  },
  components: { haAvatar, haHamburger, haNavMenu, haFooter, TagsView },
  data() {
    return {
      active: false,
    };
  },
  created() {
    window.onafterprint = function () {
      window.close();
    };
  },
  computed: {
    ...mapGetters(["APP_INFO"]),
    getQueryVariable() {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == "PAGE_MODE") {
          return pair[1];
        }
      }
      return false;
    },
    isApp() {
      return process.env.VUE_APP_ROOT_URL === "./";
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/sass/variables.scss";
.containerbox {
  min-height: calc(100% - 60px);
}
header {
  box-shadow: 0 1px 4px #00152914;
}
.hamenu {
  transition: width 300ms;
  background-color: var(--hancode-logo-bg-color);
  overflow-y: hidden;
}
.container {
  background-color: #fff;
  padding: 10px;
}
.print-header {
  justify-content: flex-end;
}
@media print {
  .print-header {
    display: none;
  }
}
</style>
